<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>扫码换标</title>
    <script src="../static/js/jQuery3.7.1.js"></script>
    <script src="../static/js/LodopFuncs.js"></script>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop32.exe"></embed>
    </object>
</head>

<body>
<div class="title">
    <div class="show-num-div">
        <div>
            <span>总数量：</span><span style="color: red" id="totalNum">0</span>
        </div>
        <div>
            <span>已扫描数：</span><span style="color: red" id="printNum">0</span>
        </div>
        <div>
            <span>今日扫描数：</span><span style="color: red" id="todayNum">0</span>
        </div>
        <div class="batchNumDiv">
            <span>当前批次总数：</span><span style="color: red" id="batchNum">0</span>
        </div>
        <div class="batchNumDiv">
            <span>当前批次已扫描：</span><span style="color: red" id="batchPrintNum">0</span>
        </div>
    </div>
    <div style="height: 20px;"></div>
    <form id="form1" onsubmit="return false">
        <div>
            <span class="scanningTitle">扫描：</span>
            <input type="text" class="input_text" id="oldInput"/>
            <input type="button" value="打印" class="baseBtn" id="pt"/>
        </div>
    </form>
<!--    <div style="height: 20px;"></div>-->
    <div style="height: 20px;">
        <span class="scanningTitle">新码：</span>
        <span class="scanningTitle" style="font-size: 18px;" id="newInput"></span>
<!--        <input type="text" class="input_text" id="newInput" style="background-color:rgb(255, 255, 204);" readonly="readonly"/>-->
    </div>
</div>
</body>
<script>
//声明为全局变量
var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));

function showNum(oldCode) {
    $.ajax({
        url:"/demo/replace/queryNum",
        type:"GET",
        data:{
            oldCode: oldCode
        },
        success:function(data){
            console.log("showNum:",data);
            if(data.errCode!==0) {
                alert("错误："+data.errMsg);
            } else {
                $("#totalNum").html(data.data.totalNum);
                $("#printNum").html(data.data.printNum);
                $("#todayNum").html(data.data.todayNum);
                $("#batchNum").html(data.data.batchNum);
                $("#batchPrintNum").html(data.data.batchPrintNum);
                if(oldCode) {
                    $(".batchNumDiv").show();
                }
            }
        }
    });
}

$(function () {
    console.log("初始化打印机："+checkOrTryHttp());
    showNum('');
    $("#pt").click(function (){
        let oldInput = $("#oldInput");
        let newInput = $("#newInput");
        $.ajax({
            url:"/demo/replace/replace",
            type:"GET",
            data:{
                codeOld: oldInput.val()
            },
            success:function(data){
                console.log(data);
                if(data.errCode!==0) {
                    alert("错误："+data.errMsg);
                } else {
                    if(data.data.codeNew) {
                        newInput.html(data.data.codeNew);
                        showNum(oldInput.val());
                        LODOP.PRINT_INIT("打条形码");               //首先一个初始化语句
                        // w=200,h=80,left=20,top=30
                        LODOP.ADD_PRINT_BARCODE(30,20,200,80,"128A",data.data.codeNew);
                        // LODOP.PREVIEW();
                        LODOP.PRINT();
                    }
                }
            }
        });

    });
    $("#oldInput").on("focus",function(){
        $(this).select();
    });
    $("#form1").on("submit",function(){
        console.log("onsubmit:");
        $("#oldInput").blur();
        $("#pt").click();
    });
});
</script>
<style>
    #oldInput {
        height: 40px;
        font-weight: bold;
        width: 400px;
        font-size: 18px;
        background-color: rgb(255, 255, 204);
    }
    .scanningTitle {
        font-size: 22px;
        font-weight: bold;
    }
    #pt {
        font-size: 24px;
        font-weight: bold;
        vertical-align: sub;
    }
    .batchNumDiv{
        display: none;
    }
    .input_text {
        width: 140px;
        height: 22px;
        line-height: 22px;
        border: 1px solid #a5c3e0;
        border-top: 1px solid #89accd;
        border-right: 1px solid #89accd;
        padding: 0 3px;
        border-radius: 3px;
        box-shadow: 1px 2px 2px #e5eaee inset;
        font-size: 12px;
        /*margin-left: 90px;*/
    }
    .baseBtn:hover {
        background-color: #555555 !important;
        border: 4px solid #555555;
    }
    .baseBtn {
        background-color: #777777 !important;
        border: 4px solid #777777;
        background-image: none !important;
        box-shadow: none !important;
        color: #FFFFFF !important;
        cursor: pointer;
        display: inline-block;
        font-size: 12px;
        padding: 0 10px 1px;
        position: relative;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
        transition: all 0.15s ease 0s;
        vertical-align: middle;
        border-radius: 3px;
    }

</style>
</html>